<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-v-for的体验</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结
            a. v-for 用于给数据进行遍历，批量创建dom
            b. 可以遍历数组、对象、字符串、数值
                默认的格式是 v-for="item in 数据"
                如果想表示索引 (item, index)
            c. 如果遍历对象，那么参数有3个
                (value, key, index)
            d. 如果遍历的数据是其他数据，不会报错，也没有结果
     -->
    <div id="demo">
        <div class="container">
            <h3>使用 v-for 指令</h3>
            <hr>

            <ul>
                <li v-for="(item, index) in arr">
                    {{ index }} - {{ item }}
                </li>
            </ul>

            <ul>
                <li v-for="(item, index) in arr1">
                    {{ index }} - {{ item }}
                </li>
            </ul>

            <ul>
                <li v-for="(item, index) in str">
                    {{ index }} - {{ item }}
                </li>
            </ul>

            <ul>
                <li v-for="(value, key, a) in obj">
                    {{ key }} - {{ value }} - {{ a }}
                </li>
            </ul>

            <ul>
                <li v-for="(item, index) in 4">
                    {{ item }} - {{ index }}
                </li>
            </ul>

            <ul>
                <li v-for="item in true"></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                arr: ['迪丽热巴', '古力娜扎', '欧阳娜娜', '易烊千玺', '马尔扎哈'],
                arr1: [
                    { id: 1, name: '鲁班七号', age: 250 },
                    { id: 2, name: '李白', age: 19 },
                    { id: 3, name: '刘备', age: 28 },
                    { id: 4, name: '马可波罗', age: 39 },
                    { id: 5, name: '钟海惠', age: 38 },
                ],
                str: 'hello',
                obj: {
                    name: '阿珂',
                    age: 22,
                    skill: '到处跑'
                }
            }
        })
    </script>
</body>
</html>